<template>
  <div class="footer-download">
    <div class="download-btn" @click="previewPDF">
      <!-- <span v-if="lang == 'cn'">预览简历</span>
      <span v-if="lang == 'en'">Preview Resume</span> -->
      <span>{{ $t("btnText.download_resume") }}</span>
      <svg viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M0.2 0.790121L7.27 3.94012V4.82212L0.2 7.98612V6.93612L5.954 4.38812L0.2 1.82612V0.790121ZM8.67656 0.790121L15.7466 3.94012V4.82212L8.67656 7.98612V6.93612L14.4306 4.38812L8.67656 1.82612V0.790121Z"
          fill="#172026"
        />
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject } from "vue";

const lang = inject("lang");

const previewPDF = () => {
  goto("/pdf", { pdf: "resume", lang: lang.value });
};
</script>
<style scoped lang="less">
.footer-download {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  margin-right: 120px;
  .download-btn {
    display: flex;
    cursor: pointer;
    align-items: center;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #ccd6de;
    padding: 10px 16px;
    gap: 5px;
    font-size: 14px;
    color: #172026;
    svg {
      width: 16px;
      height: 8px;
    }
  }
}

@media screen and (max-width: 768px) {
  .footer-download {
    margin: 123px 0;
    .download-btn {
      padding: 60px;
      border-radius: 50px;
      font-size: 72px;
      gap: 24px;
      svg {
        width: 82px;
        height: 82px;
      }
    }
  }
}
</style>
